*,
*::before,
*::after
  box-sizing: border-box

html
  font-size: 12px
  height: 100%
  line-height: 14px

body
  -moz-osx-font-smoothing: grayscale
  -webkit-font-smoothing: antialiased
  background-color: $white
  color: $gray-400
  font-family: $font
  font-weight: 400
  min-height: 100%
  min-width: 320px


// ----------------------
// HEADINGS AND PARAGRAPH
// ----------------------
h1,
h2,
h3,
h4,
h5,
h6
  font-weight: 600
  margin: 0

p,
ul,
ol,
pre,
figure
  margin: 0

a
  color: inherit
  outline: 0
  text-decoration: none

button
  outline: 0

.off-screen
  left: -10000rem
  position: absolute
  top: auto

.text-center
  text-align: center

.text-right
  text-align: right

.text-left
  text-align: left


// ----------------------
// CONTAINER
// ----------------------
.main-wrapper
  padding: 30px 50px


// ----------------------
// HEADER
// ----------------------
.header
  margin: 0 0 30px

  &__logo
    display: block
    height: auto
    margin: 0 auto
    width: 70px


// ----------------------
// GENERAL SECTION
// ----------------------
.section
  text-align: center

  &__title
    color: var(--primary-color)
    font-size: 27px
    font-weight: 700
    line-height: 38px
    margin: 0 0 30px

  &__text
    margin: 0 0 30px


// ----------------------
// GENERAL MESSAGE
// ----------------------
.message
  display: flex
  flex-direction: column
  height: 100vh
  justify-content: center
  padding: 0 30px 30px
  text-align: center

  &__icon
    display: block
    fill: var(--primary-color)
    height: 60px
    margin: 0 auto 15px
    width: 60px

  &__title
    font-size: 34px
    font-weight: 700
    line-height: 38px

  &__text
    font-size: 18px
    line-height: 25px
